<template>
    <div class="trade">
        <div v-if="tradeShow">
            <van-nav-bar :title="$t('transaction.title')" leftArrow @click-left="_return"/>
            <div class="tradeMain">
                <div class="amount">
                    <van-row type="flex" justify="space-between" align="center">
                        <van-col>{{$t('transaction.amount')}}</van-col>
                        <van-col>{{mine.cumuls}} {{account}}</van-col>
                    </van-row>
                    <ul>
                        <li>
                            <p>{{tip}}</p>
                            <span>{{$t('transaction.about')}}<b> {{Number(mine.syeth).toFixed(4)}} </b>{{account}}</span>
                        </li>
                        <li>
                            <p>{{$t('transaction.transaction_residue')}}</p>
                            <span><b> {{Number(mine.surplus).toFixed(4)}} </b>AAT</span>
                        </li>
                        <li>
                            <p>{{$t('transaction.ETH_residue').replace(/ETH/,account)}}</p>
                            <span><b> {{Number(mine.myeth).toFixed(4)}} </b>{{account}}</span>
                        </li>
                        <li>
                            <p>{{$t('transaction.gain')}}</p>
                            <span><b> {{Number(mine.gzoec).toFixed(4)}} </b>AAT</span>
                        </li>
                    </ul>
                </div>
                <div class="pond">
                    <ul>
                        <li v-for="item,index in list">1:{{item.id}} <span><b v-if="item.val > 0 && item.val < mine.bilvnum">{{$t('transaction.residue_about')}}</b> {{item.val*item.id}} AAT</span></li>
                    </ul>
                </div>
                <div class="record" v-if="mine.record">
                    <p class="tip">{{$t('transaction.record')}}</p>
                    <div class="card" v-for="item in mine.record" @click="look_record(item.id)">
                        <van-row type="flex" justify="space-between" align="center">
                            <van-col>
                                <p>{{Number(item.oec_num)}} AAT</p>
                                <span>{{$t('transaction.rate')}}：1:{{item.bilv}}</span>
                            </van-col>
                            <van-col>
                                <button>{{item.status}}</button>
                            </van-col>
                        </van-row>
                        <van-row type="flex" justify="space-between" align="center">
                            <van-col>{{$t('transaction.total')}}：{{item.num}} ETH</van-col>
                            <van-col>{{item.add_time}}</van-col>
                        </van-row>
                    </div>
                </div>
            </div>
            <div class="fixBtn">
                <button class="btn" @click="handShow = true,tradeShow = false">{{$t('transaction.button')}}</button>
            </div>
        </div>
        <record v-if="recordShow" @_return="_returns" :inset="inset" ></record>
        <hand v-if="handShow" @_return="_returns" :nowRate="mine.nowrate" :account="account"></hand>
    </div>
</template>

<script>
    import record from '@/components/ecology/record'
    import hand from '@/components/ecology/hand'
    import moment from 'moment'
    export default {
        data() {
            return {
                tradeShow:true,
                recordShow:false,
                handShow:false,
                mine:{},
                tip:'',
                list:[],
                inset:'',
                account:''
            }
        },
        methods: {
            _return(){
                this.$emit('_return')
            },
            _returns(){
                this.recordShow = this.handShow = false
                this.tradeShow = true
                this.getData()
            },
            getData(){
                this.$api.post('resonance/getCoinname')
                    .then(res =>{
                        this.account = res.detail.toUpperCase()
                    })
                this.$api.post('resonance/restran')
                    .then(res =>{
                        this.mine = res.detail
                        this.tip = this.$t('transaction.residue').replace(/1.699/,`1:${this.mine.nowrate}`)
                        this.list = this.mine.bilvs.slice(0,5)
                        this.mine.record.map(item =>{
                            item.add_time = moment(item.add_time*1000).format('YYYY-MM-DD HH:mm')
                            item.status == 1 ? item.status = this.$t('transaction.state_two') : item.status = this.$t('transaction.state_one')
                        })
                        if(this.mine.record.length == 0){
                            this.mine.record = false
                        }
                    })
            },
            look_record(data){
                this.inset = data
                this.recordShow = true
                this.tradeShow = false
            }
        },
        created() {
            this.getData()
        },
        mounted() {
            this.$emit('disappear')
        },
        components:{
            record,
            hand
        }
    }
</script>

<style lang="stylus" scoped>
    bac = linear-gradient(90deg,rgba(42,42,42,1) 0%,rgba(46,46,46,1) 100%);
    back = linear-gradient(90deg,rgba(203,175,137,1) 0%,rgba(219,200,170,1) 100%) !important
    font = #CBAF89
    fonts = #898989
    [class*=van-hairline]::after{
        border: none;
    }
    .tradeMain
        width 94%
        margin 0 auto
        .amount
            padding 0 10px
            background linear-gradient(90deg, #50d5b1 0%, #2cc399 100%);
            border-radius 5px
            .van-row
                padding 25px 0
                border-bottom 1px solid rgba(216,216,216,.1)
                .van-col
                    color #135a47
                    &:last-child
                        color #fff
            ul
                margin-top 10px
                padding-bottom 20px
                li
                    display flex
                    display -webkit-flex
                    justify-content space-between
                    align-items center
                    padding 4px 0
                    p
                        font-size 12px
                        color #135a47
                    span
                        font-size 12px
                        color #333333
                        b
                            font-weight normal
                            color #fff
        .pond
            overflow hidden
            ul
                li
                    height 40px
                    width 100%
                    line-height 40px
                    margin 5px 0
                    padding 0 10px
                    span
                        float right
                        b
                            font-weight normal
                    &:nth-child(1)
                        width 92%
                        background linear-gradient(90deg, #64b9ff 0%, #4d99d8 100%) !important;
                    &:nth-child(2)
                        width 84%
                        background:linear-gradient(90deg, #64b9ff 0%, #4b83b1 100%);;
                    &:nth-child(3)
                        width 76%
                        background:linear-gradient(90deg, #4b93ce 0%, #5079b5 100%);;
                    &:nth-child(4)
                        width 68%
                        background:linear-gradient(90deg, #4b79ce 0%, #4d6eab 100%);
                    &:nth-child(5)
                        width 60%
                        background: #56679a;
        .record
            margin-top 10px
            padding-bottom 20px
            .tip
                border-left 3px solid font
                padding-left 4px
                color #D8D8D8
            .card
                margin-top 3px
                background back
                border-radius 5px
                .van-row
                    background bac
                    padding 15px
                    border-radius 5px 5px 0 0
                    .van-col
                        p
                            color font
                            font-size 20px
                        span
                            font-size 10px
                            color #898989
                        button
                            border 1px solid font
                            background none
                            color font
                            outline none
                            border-radius 25px
                            font-size 10px
                            padding 10px 20px

                    &:last-child
                        color #1F1F1F
                        font-size 10px
                        padding 4px 15px
                        border-radius 0 0 5px 5px
                        background back

    .fixBtn
        position fixed
        bottom 0
        width 100%
        overflow hidden
        .btn
            margin 10px
            width 94%
            color #ffffff

</style>